<template>
    <div class="app-container x-container" v-loading="loading">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="SEO描述" prop="content">
                <el-input :rows="30" type="textarea" v-model="ruleForm.content" placeholder="请输入SEO描述" />
            </el-form-item>

            <el-row>
                <el-col class="flex-center-align" :span="24">
                    <el-button type="primary" @click="RefreshForm(ruleFormRef)">刷新</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>

</template>

<script setup>
import { saveChain, getChain } from '@/api/deadchain'
import { reactive, ref, inject } from 'vue'
defineOptions({
    name: 'Deadchain/index',
})
let used = inject('used')
const ruleFormRef = ref()
const ruleForm = reactive(
    {
        content: '',//内容
    }
)

const rules = reactive(
    {
        content: [
            { required: true, message: '请输入攻略标题', trigger: 'blur' },
        ],
    }
)


/* 获取详情数据 */
let loading = ref(false);
const getDetail = async () => {
    loading.value = true;
    const { data } = await getChain()
    let str = data.join('\n');
    ruleForm.content = str;
    loading.value = false;
}
getDetail()

async function RefreshForm() {
    await getDetail()
    used.msgSuccess('刷新成功')
}
//提交
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            let params = {
                content: ruleForm.content.replaceAll('\n', ',')
            }
            let res = await saveChain(params)
            if (res.code == 1) {
                used.msgSuccess(res.message)
            } else {
                used.msgError(res.message)
            }
        } else {
        }
    })
}

</script>

<style scoped lang="scss">
.x-container {
    position: relative;
    padding: 20px;
    background-color: #fff;
}
</style>